﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Big Timer</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- Timer references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/timer.js"></script>
    <script src="/js/default.js"></script>

    <!-- Microsoft Advertising required references -->
    <!--<script src="///MSAdvertisingJS/ads/ad.js" ></script>-->
</head>
<body>
<!--    <div id="myAd" class="adControl320x50"
        data-win-control="MicrosoftNSJS.Advertising.AdControl" 
        data-win-options="{applicationId: '7c447f17-abdb-4122-a5e1-5e272f57791a', adUnitId: '87612'}">
    </div>-->

    <div id="timer">
        <!-- this div for the times uses a span for each digit, disabling kerning is not yet supported-->
        <div class="timer-buttons" id="upButtons"><button id="hoursUp" onmousedown="defaultPage.hoursMouseDown(1);" onmouseup="defaultPage.mouseUp();" onmouseout="defaultPage.mouseUp();">▲</button><button id="minutesUp" onmousedown="defaultPage.minutesMouseDown(1);" onmouseup="defaultPage.mouseUp();" onmouseout="defaultPage.mouseUp();">▲</button></div>
         <div class="timer-time" id="time" aria-valuenow="0" aria-valuetext="00:00:00" ><span id="hoursD">0</span><span id="hours">0</span><span class="marker">:</span><span id="minutesD">0</span><span id="minutes">0</span><span class="marker">:</span><span id="secondsD">0</span><span id="seconds">0</span></div>
        <div class="timer-buttons" id="downButtons"><button id="hoursDown" onmousedown="defaultPage.hoursMouseDown(-1);" onmouseup="defaultPage.mouseUp();" onmouseout="defaultPage.mouseUp();">▼</button><button id="minutesDown" onmousedown="defaultPage.minutesMouseDown(-1);" onmouseup="defaultPage.mouseUp();" onmouseout="defaultPage.mouseUp();">▼</button></div>
    </div>
    	<div id="timeList" class="timer-laplist" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource: defaultPage.itemList.dataSource, 
            selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none', layout:{type: WinJS.UI.ListLayout}}"></div>

    <!-- BEGINTEMPLATE: Template code for an app bar -->
    <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
        <button data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdUp',type:'toggle',selected:true,label:'Stopwatch',icon:'url(images/uparrows.png)',section:'global',tooltip:'Stopwatch'}"
            data-win-res="{winControl: {label: 'cmdUpLabel', tooltip:'cmdUpTooltip'}}">
        </button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDown',type:'toggle',label:'Countdown',icon:'url(images/downarrows.png)',section:'global',tooltip:'Countdown'}"
            data-win-res="{winControl: {label: 'cmdDownLabel', tooltip:'cmdDownTooltip'}}"
            >
        </button>
        <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdSeparator',type:'separator',section:'global'}" />
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdClear',label:'Restart',icon:'undo',section:'global',tooltip:'Set Watch to initial value'}"
            data-win-res="{winControl: {label: 'cmdClearLabel', tooltip:'cmdClearTooltip'}}">
        </button>
<!--        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdZoom',label:'Zoom in',icon:'zoomin',section:'global',tooltip:'Increase font size'}">
        </button>-->
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdStartStop',label:'Start',icon:'play',section:'selection',tooltip:'Starts the clock'}"
            data-win-res="{winControl:{label: 'cmdStart', tooltip:'cmdStartTooltip'}}">
        </button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdLap',label:'Lap',icon:'flag',section:'selection',tooltip:'Stores one lap'}"
            data-win-res="{winControl:{label: 'cmdLap', tooltip:'cmdLapTooltip'}}">
        </button>
    </div>

    <!-- ENDTEMPLATE -->
</body>
</html>
